<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="referrer" content="origin">
	<meta name="viewport"
		content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta name="Cache-Control" content="no-cache, no-store, must-revalidate">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/paystatic/style.css" />
	<script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js">
	</script>
	<script type="text/javascript" src="/paystatic/vconsole.min.js"></script>
	<script src="/paystatic/axios.min.js"></script>
	<script src="/paystatic/vue@2.7.16"></script>
	<!-- <script src="./js/flexible.js"></script> -->
	<style>
		.page-box {
		  min-height: 100vh;
		  background-color: #f5f7fa;
		}
		.button {
		  background-color: #3498db;
		  padding: 8px 20px;
		  color: #fff;
		  border-radius: 20px;
		  width: 100%;
		}
		.logo {
		  display: block;
		  margin: 0 auto;
		}
	  </style>
</head>

<body>
	<div id="app" class="page-box">
		<div class="card bg-white br20 d-f d-c">
			<div class="f20 blue2 fb tc">报名支付成功</div>
			<!-- <div class="gray9 f14 mt20 tc">请尽快完成支付</div> -->
			<div class="">
			  <div class="item line pt10 pb10 ww100">
				<div class="blue2 fb f14">报名编号</div>
				<div class="f14 mt5">{{ order.id }}</div>
			  </div>
			  <div class="item line pt10 pb10 ww100">
				<div class="blue2 fb f14">员工信息</div>
				<div class="f14 mt5">
				  {{ order.parentName }}|{{ order.phone }}
				</div>
			  </div>
			  <div class="item line pt10 pb10 ww100">
				<div class="blue2 fb f14">报名子女</div>
				<div class="f14 mt5">
				  {{ order.studentName }}（{{ order.age }}岁）
				</div>
			  </div>
			  <div class="item line pt10 pb10 ww100">
				<div class="blue2 fb f14">课程信息</div>
				<div class="f14 mt5">
				  {{ order.courseName }}（{{ order.quantity }}天）
				</div>
			  </div>
			  <div class="item line pt10 pb10 ww100">
				<div class="blue2 fb f14">应付金额</div>
				<div class="f14 mt5">￥{{ order.totalPrice }}</div>
			  </div>
			  <div class="mt20">
				<button @click="goBack" class="button">返回首页</button>
			  </div>
			</div>
		  </div>
		<!-- <div class="container">
			<div class="success-pay">
				<img class="success-pay-img" src="./paystatic/paysucc.png"></img>
			</div>
			<div class="oreder-content">
				<div class="oreder-content-text1">
					￥ <span class="point-text">{{order.totalPrice}}</span>
				</div>
				<div class="success-pay-text">
					<div class="success-pay-text1">恭喜您!支付成功</div>
				</div>				
			</div>
			<div class="backbtns" @click="goBack">
				<img class="success-pay-img" src="./paystatic/payBtn.png"></img>
			</div>
		</div> -->
	</div>
	<script>
		Vue.component('show-value', {
			template: `<div><slot><div> <div></slot></div>`
		})
		let vue = new Vue({
			el: '#app',
			data() {
				return {
					// logo: './imgs/logo.png',
					order: { '1': 'text' },
					url: 'https://payapp.weixin.qq.com'
				}
			},
			created() {
				this.getQueryVal()
			},
			mounted() {
				this.showCustomPage()
				if (!this.result.out_trade_no) {
					parent.alert('没有订单号，请联系管理员！')
				} else {
					this.queryOrderInfo()
				}
			},
			methods: {
				// 获取地址栏字段
				getQueryVal() {
					// let astr = '?sub_mch_id=1234567&out_trade_no=ABCDEFG&check_code=39f0876dd58e4eb61b66250f69d02705'
					// let queryStr = astr.substring(1)
					this.windowurl = window.location;
					let queryStr = window.location.search.substring(1) // 地址栏字符串
					let strArr = queryStr.split('&')
					this.result = {}
					if (strArr.length) {
						strArr.forEach(val => {
							let subStrArr = val.split('=')
							this.result[subStrArr[0]] = subStrArr[1]
						})
					}
				},

				// 用于展示商家小票
				showCustomPage() {
					let customData = JSON.stringify({
						action: 'onIframeReady',
						displayStyle: 'SHOW_CUSTOM_PAGE',
						height: 900
					})
					parent.postMessage(customData, this.url)
				},

				// 请求订单信息（需要保存订单信息的后台系统提供）
				queryOrderInfo() {
					axios({
						// baseURL: 'https://sn.hxt5.com/',
						// method: 'get',
						url: "/api/orderXcx/getDetails?orderId=" + this.result.out_trade_no,
						// headers: {
						// 	'accept': '*/*',
						// 	'content-type': 'application/x-www-form-urlencoded'
						// },
						// params: {
						// 	out_trade_no: this.result.out_trade_no
						// },
						// data: {
						// 	out_trade_no: this.result.out_trade_no
						// }
					}).then(res => {
						this.order = res.data
					})
						.catch(err => {
							// parent.alert('出错了，请联系管理员！')
							// this.order = err;
						})
				},

				// 返回首页
				goBack() {
					let mchData = {
						action: 'jumpOut',
						jumpOutUrl: "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxcae4388c15187a41&redirect_uri=https%3A%2F%2Fsl.rexuejiankang.com%2Fapi%2FparentXcx%2Flogin&response_type=code&scope=snsapi_base#wechat_redirect",
					}
					let postData = JSON.stringify(mchData)
					parent.postMessage(postData, this.url)
				}
			}
		})
	</script>
</body>

</html>